<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                <span class="seachStatus">
                    {{$t('chlerrcd')}}
                    <el-input v-model.trim="errcodeform.chnErrCode" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachCSC">
                    {{$t('chnerrordesc')}}
                    <el-input v-model.trim="errcodeform.chnErrDesc" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachCSC">
                    {{$t('platerrcode')}}
                    <el-input v-model.trim="errcodeform.plaErrCode" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
            </span>
            <span class="span-bottom">
                <span class="seachCSC">
                    {{$t('platerrdesc')}}
                    <el-input v-model.trim="errcodeform.plaErrDesc" :placeholder="$t('plsset')" size="mini"></el-input>
                </span>
                <span class="seachXAC">
                    {{$t('channel')}}
                    <el-select v-model="errcodeform.chnNo" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                        <el-option :label="$t('notyetcld')" value="0"></el-option>
                        <el-option :label="$t('invlid')" value="1"></el-option>
                    </el-select>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" row-key="funcId" :data="errcodeTab" id="out-table">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="settleSerialNo" :label="$t('chnnumber')">
                </el-table-column>
                <el-table-column prop="payOrderNo" :label="$t('chnlnam')">
                </el-table-column>
                <el-table-column prop="merOrderNo" :label="$t('chlerrcd')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('chnerrordesc')">
                </el-table-column>
                <el-table-column prop="merId" :label="$t('platerrcode')">
                </el-table-column>
                <el-table-column prop="productCode" :label="$t('platerrdesc')">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailssRec(scope.row.settleSerialNo)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="errcodeform.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="errcodeform.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data () {
        return {
            total: 0,
            errcodeform: {
                chnErrCode: null,
                chnErrDesc: null,
                plaErrCode: null,
                plaErrDesc: null,
                chnNo: null,
                pageNum: 1,
                pageSize: 10
            },
            errcodeTab: []
        }
    },
    methods: {
        getErrCodeList() {},
        seach() {
            this.getErrCodeList()
        },
        handleSizeChange (newSize) {
            this.clarifyForm.pageSize = newSize
            this.getClarify()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.clarifyForm.pageNum = newNum
            this.getClarify()
        }
    },
    mounted () {
        this.getErrCodeList()
    }
}
</script>

<style lang="less" scoped>
@import './errCode.less';
</style>
